<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户中心-咨询建议</title>
    [#include "common/include.ftl"]
    <link rel="styleSheet" href="${base}/resource/css/member.css">
    [#import "common/pagination.ftl" as p/]
    <script type="text/javascript">

        function view(context){
            var data = $.parseJSON( context.attr('data'));
            if(data){
                var content = template('consult-return', data);
                oDialog.alert(content, "我的咨询建议("+data.title+")", true);
            }

            $(".consult-return *").css("overflow-x", "auto");
        }

        function del(context){
            var $this =  context;
            var id = $this.attr('data-id');
            if(hasOpenDlg){
                return false;
            }
            hasOpenDlg = true;
            var dialog =  oDialog.confirm("你确定删除?",
                function(){
                    ajax({
                        url: base + '/member/consult/delete.jhtml',
                        data: {consultId:id},
                        success: function(data){
                            if(data.type == 'success'){
                                if($('tr',$this.closest('table')).length < 3){
                                    location.reload();
                                }
                                $this.closest('tr').remove();
                            }
                            oDialog.prompt(data.content, 2000);
                        },
                        complete: function(){
                            hasOpenDlg = false;
                        }
                    });
                },
                function(){
                    dialog.close();
                    hasOpenDlg = false;
                },
                "删除咨询建议"
            );
        }

        var hasOpenDlg = false;
        function add(){
            $('input', $('#add-cont')).val('');
            $('textarea', $('#add-cont')).val('');
            if(hasOpenDlg){
                return false;
            }
            hasOpenDlg = true;
           var dialog =  oDialog.dialogElem({
                title: '添加咨询建议', content: $('#add-cont'),
                cancelValue: '取消',
                cancel: function () {
                    dialog.close();
                    hasOpenDlg = false;
                },
                okValue: '保存',
                ok: function () {
                    if(inputIsAllFinish()){
                       ajax({
                           url: base + '/member/consult.jhtml',
                           data: setData(),
                           showError:true,
                           success: function(result){
                               if(result.status.type == 'success'){
                                   var $memberTableList = $('.member-table-list');
                                   var data = result.data, json = JSON.stringify(result.data);
                                   var html =  template('consult-tr', {consult:data, data:json});
                                   $('tr:first',$memberTableList).after(html);
                                   if($('tr',$memberTableList).length > 12){
                                      $('tr:last',$memberTableList).prev().remove();
                                   }
                                   $('.list-empty',$memberTableList).remove();
                                   dialog.close().remove();
                               }
                               oDialog.prompt(result.status.content, 2000);
                           },
                           complete:function(){
                               hasOpenDlg = false;
                           }
                       });
                    }
                    return false;
                }
            });
        }

        function setData(){
            var $context =  $('#add-cont');
            var data = {};
            data.title = $('.title', $context).val();
            data.type = $('.type', $context).val();
            data.contact = $('.contact', $context).val();
            data.content = $('.content', $context).val();
            return data;
        }

        function inputIsAllFinish(){
            var $context =  $('#add-cont');
            var data = setData();

            var flag = true;

            if(!data.title.length){
                $('.title',$context).next('.error-msg').text('请填写标题').end().focus();
                flag = false;
            }else{
                $('.title',$context).next('.error-msg').text('')
            }

            if(!data.type.length){
                $('.type', $context).next('.error-msg').text('请选择类型').end().focus();
                flag = false;
            }else{
                $('.type', $context).next('.error-msg').text('');
            }

            if(!/^1[3|4|5|8][0-9]\d{8}$/.test(data.contact)){
                $('.contact', $context).next('.error-msg').text('请填写正确的手机号码').end().focus();
                flag = false;
            }else{
                $('.contact', $context).next('.error-msg').text('')
            }

            if(!data.content.length){
                $('.content', $context).next().next('.error-msg').text('请填写内容').end().focus();
                flag = false;
            }else{
                $('.content', $context).next().next('.error-msg').text('')
            }

            return flag;
        }
    </script>
</head>
<body class="customer">
<div class="top">
    [#include "common/header.ftl"]
</div>
<div class="crumbs">
	<a href="${base}/member/index.jhtml">会员中心</a>
	<i style='font-family: simsun;font-style: normal;'>></i>
	<a href="#">消息中心</a>
	<i style='font-family: simsun;font-style: normal;'>></i>
	<a href="#">咨询建议</a>
</div>
<div id="member-main">
	[#assign menuNo='consult'/]
    [#include "common/member-left.ftl"/]

    <div class="member-right">
        <div class="right-wrap">
            <h2 class="right-title">我的咨询建议</h2>

            <div class="member-order">

                <div class="list-header">
                    <div class="order-search fr">
                        <div class="has-clean fl">
                            <a class="hp-button fl" onclick="add()">新增</a>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>

                <div class="clear"></div>
                <table class="member-table-list">
                    <tr>
                        <th width="40%">标题</th>
                        <th width="15%">
                            <form id="searchForm" action="${base}/member/consult/list.jhtml">
                                <select name="type" onchange="$('#searchForm').submit();">
                                    <option value="">全部</option>
                                    <option [#if type = 0]selected="selected"[/#if] value="0">咨询</option>
                                    <option [#if type = 1]selected="selected"[/#if] value="1">建议</option>
                                    <option [#if type = 2]selected="selected"[/#if] value="2">投诉</option>
                                    <option [#if type = 3]selected="selected"[/#if] value="3">纠错</option>
                                </select>
                            </form>
                        </th>
                        <th width="15%">状态</th>
                        <th width="15%">时间</th>
                        <th>操作</th>
                    </tr>

                [#if pager?? && pager.list?has_content]
                    [#list pager.list as consult]
                    <tr>
                        <td>${consult.title}</td>
                        <td>
                            [#if  consult.type = 'consult']
								咨询
                            [#elseif consult.type = 'suggest']
								建议
                            [#elseif consult.type = 'complain']
								投诉
                            [#elseif consult.type = 'correct']
								商品纠错
                            [/#if]
                        </td>
                        <td>
                            [#if consult.returnStatus]
								已回复
                            [#else]
								未回复
                            [/#if]
                        </td>
                        <td>${consult.createDate?datetime}</td>
                        <td>
                            <a data="${consult?html}" onclick="view($(this));" href="javascript:;" class="consult-view">查看</a>
                            <a data-id="${consult.id}" onclick="del($(this));" href="javascript:;" class="consult-delete">删除</a>
                        </td>
                    </tr>
                    [/#list]
                [#else]
                    <tr>
                        <td colspan="5" class="list-empty">暂无记录</td>
                    </tr>
                [/#if]
                    <!--<tr>
                        <td colspan="5">
                        [@p.pager pager = pager url = "${base}/member/consult/list.jhtml"/]
                        </td>
                    </tr>-->
                </table>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>

<!--新增-->
<div id="add-cont" style="display:none">
    <div class="mc">
        <div class="form">
            <div class="item">
                <div class="label">
                    <em>*</em><span>标题</span>
                </div>
                <div class="fl">
                    <input type="text" class="text  title">
                    <span class="error-msg"></span>
                </div>
                <div class="clear"></div>
            </div>
            <div class="item">
                <div class="label">
                    <em>*</em><span>类型</span>
                </div>
                <div id="element_id" class="fl">
                    <select data-first-title="请选择" data-first-value='0' class="type">
                        <option value="consult">咨询</option>
                        <option value="suggest">建议</option>
                        <option value="complain">投诉</option>
                        <option value="correct">纠错</option>
                    </select>

                </div>
                <div class="clear"></div>
            </div>
            <div class="item">
                <div class="label">
                    <em>*</em><span>手机号码</span>
                </div>
                <div class="fl">
                    <input type="text" class="text contact">
                    <span class="error-msg"> </span>
                </div>
                <div class="clear"></div>
            </div>
            <div class="item">
                <div class="label">
                    <span>内容</span>
                </div>
                <div class="fl">
                    <textarea rows="8" cols="40" class="content"></textarea>
                    <div class="clear"></div>
                    <span class="error-msg"></span>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
[#include "common/footer-slidebar-lazyload.ftl"]

<script id="consult-tr" type="text/html">
    <tr>
        <td>{{consult.title}}</td>
        <td>
        {{if consult.type == 'consult'}}
            咨询
       {{else if consult.type == 'suggest'}}
            建议
       {{else if consult.type == 'complain'}}
            投诉
       {{else if consult.type == 'correct'}}
            商品纠错
       {{/if}}
        </td>
        <td>
        {{if consult.returnStatus}}
            已回复
        {{else}}
            未回复
        {{/if}}
        </td>
        <td>{{consult.createDate}}</td>
        <td>
            <a data="{{data}}" onclick="view($(this));" href="javascript:;" class="consult-view">查看</a>
            <a data-id="{{consult.id}}" onclick="del($(this));" href="javascript:;" class="consult-delete">删除</a>
        </td>
    </tr>
</script>


<script id="consult-return" type="text/html">
    <div>
        <dl>
            <dt style="color:#C40000;font-weight: 900">内容：</dt>
            <dd>
                <p style="width: 600px;padding-left:10px">{{content}}</p>
            </dd>
        </dl>
        {{if returnStatus}}
        <dl>
            <dt style="color:#C40000;font-weight: 900">360跨界商萌回复：</dt>
            <dd class="consult-return">
                <p style="width: 600px; padding-left:10px">{{$string(returnContent)}}</p>
            </dd>
        </dl>
        {{/if}}
    </div>
</script>
</body>
</html>